<template>
  <FrontSideTable
    tableTitle="构件描述类型"
    dataUrl="/param/memberDesc/getList"
    addUrl="/param/memberDesc/add"
    editUrl="/param/memberDesc/edit"
    deleteUrl="/param/memberDesc/delete"
    :columns="columns"
    searchHint="输入名称进行搜索"
    :searchProps="searchProps"
    :form="form"
    :rules="rules"
    @onCreated="handleCreated"
    @beforeAdd="handleAdd"
    @beforeEdit="handleEdit">
    <!--表单-->
    <template slot="form">
      <el-form-item label="描述类型名" prop="name">
        <el-input v-model="form.name" placeholder="输入构件描述类型名称"></el-input>
      </el-form-item>
      <el-form-item label="描述规则" prop="memberDesc">
        <el-input type="textarea" name="memberDesc" :autosize="{minRows:2, maxRows:4}" v-model="form.memberDesc" placeholder="点击下面的构件参数按钮，添加构件参数"></el-input>
      </el-form-item>
      <el-form-item label="顺序号" prop="sortNo">
        <el-input type="number" v-model.number="form.sortNo" placeholder="输入顺序号"></el-input>
      </el-form-item>
    </template>
    <!--参数按钮-->
    <template slot="formExtra">
      <el-card :body-style="{'text-align':'center'}">
        <div slot="header" class="clearfix">
          <span style="line-height: 36px;font-weight: bold;">构件描述参数</span>
          <el-tooltip effect="dark" content="构件描述作用域内任意参数未填或为0时，整个作用域的语句会被自动删除" placement="top-start">
            <el-button style="float: right;" type="success" @click="setScope">设置作用域</el-button>
          </el-tooltip>
        </div>
        <!--参数1-->
        <el-tooltip effect="dark" content="例：第1孔桥面铺装" placement="top-start">
          <a class="btn btn-app" style="width: 20%;" @click="insertText('{siteNo}')">
            <i class="fa fa-chain-broken"></i>孔号
          </a>
        </el-tooltip>
        <!--参数2-->
        <el-tooltip effect="dark" content="例：第1联桥面铺装" placement="top-start">
          <a class="btn btn-app" style="width: 20%;" @click="insertText('{jointNo}')">
            <i class="fa fa-chain"></i>联号
          </a>
        </el-tooltip>
        <!--参数3-->
        <el-tooltip effect="dark" content="例：1#墩盖梁" placement="top-start">
          <a class="btn btn-app" style="width: 20%;" @click="insertText('{pierNo}')">
            <i class="fa fa-chain-broken"></i>墩台号
          </a>
        </el-tooltip>
        <!--参数4-->
        <el-tooltip effect="dark" content="例：第1排横隔板" placement="top-start">
          <a class="btn btn-app" style="width: 20%;" @click="insertText('{verticalNo}')">
            <i class="fa fa-chain-broken"></i>纵桥向编号
          </a>
        </el-tooltip>
        <!--参数5-->
        <el-tooltip effect="dark" content="例：5#板梁" placement="top-start">
          <a class="btn btn-app" style="width: 20%;" @click="insertText('{horizontalNo}')">
            <i class="fa fa-chain-broken"></i>横桥向编号
          </a>
        </el-tooltip>
        <!--参数6-->
        <el-tooltip effect="dark" content="例：小桩号侧1#块顶板等" placement="top-start">
          <a class="btn btn-app" style="width: 20%;" @click="insertText('{stakeSide}')">
            <i class="fa fa-chain-broken"></i>大、小桩号
          </a>
        </el-tooltip>
        <!--参数7-->
        <el-tooltip effect="dark" content="例：合拢段、边跨现浇段等" placement="top-start">
          <a class="btn btn-app" style="width: 20%;" @click="insertText('{specialSection}')">
            <i class="fa fa-chain-broken"></i>特殊节段
          </a>
        </el-tooltip>
        <!--参数8-->
        <el-tooltip effect="dark" content="例：板梁、T梁等" placement="top-start">
          <a class="btn btn-app" style="width: 20%;" @click="insertText('{memberTypeName}')">
            <i class="fa fa-chain-broken"></i>构件名称
          </a>
        </el-tooltip>
      </el-card>
    </template>
  </FrontSideTable>
</template>

<script>
  import FrontSideTable from "../../template/FrontSideTable.vue"
  import {intValidator} from "../../../assets/js/utils/ValidateUtils"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"

  let oldName = "";

  export default {
    name:"MemberDescMaintenance",
    data() {
      //名称校验
      let nameValidator = (rule, value, callback)=>{
        if(value === oldName) {
          callback();
        } else if(this.dataList.some(item=>item.name === value)) {
          callback(new Error("描述规则名称重复"));
        } else {
          callback();
        }
      };

      return {
        dataList:[],
        columns:[
          {prop:"sortNo", label:"顺序号", width:"100px", sortable:true},
          {prop:"name", label:"描述类型名称", width:"300px"},
          {prop:"memberDesc", label:"构件描述规则"}
        ],
        searchProps:["name"],
        form:{
          name:"",
          memberDesc:"",
          sortNo:0
        },
        rules:{
          name:[
            {required:true, message:"请输入构件描述规则名称", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ],
          memberDesc:[
            {required:true, message:"请输入构件描述规则", trigger:"blur"}
          ],
          sortNo:[
            {validator:intValidator, trigger:"blur"}
          ]
        }
      }
    },
    methods:{
      //根据光标所在位置插入文字
      insertText(text) {
        let textarea = document.getElementsByName("memberDesc")[0];
        if (typeof textarea.selectionStart === 'number' && typeof textarea.selectionEnd === 'number') {
          let startPos = textarea.selectionStart,
            endPos = textarea.selectionEnd,
            cursorPos = startPos,
            tmpStr = this.form.memberDesc;
          if(tmpStr) {
            this.form.memberDesc = tmpStr.substring(0, startPos) + text + tmpStr.substring(endPos, tmpStr.length);
          } else {
            this.form.memberDesc = text;
          }
          cursorPos += text.length;
          textarea.selectionStart = textarea.selectionEnd = cursorPos;
        } else {
          this.form.memberDesc += text;
        }
      },
      //设置作用域
      setScope() {
        let textarea = document.getElementsByName("memberDesc")[0];
        if (typeof textarea.selectionStart === 'number' && typeof textarea.selectionEnd === 'number') {
          let startPos = textarea.selectionStart,
            endPos = textarea.selectionEnd,
            tmpStr = this.form.memberDesc;
          if(tmpStr) {
            this.form.memberDesc = tmpStr.substring(0, startPos) + "[" + tmpStr.substring(startPos, endPos) + "]" + tmpStr.substring(endPos, tmpStr.length);
          }else {
            this.form.memberDesc = "[]";
          }
        }
      },
      handleAdd() {
        oldName = "";
        clearFields(this.form);
      },
      handleEdit(data) {
        oldName = data.name;
        this.form = {...data};
      },
      handleCreated(dataList) {
        this.dataList = dataList;
      }
    },
    components:{FrontSideTable}
  }
</script>



// WEBPACK FOOTER //
// MemberDescMaintenance.vue?346533ca